<script>
export default {
  props: {
    type: {
      type: String,
      required: true,
      default: 'before'
    },
    fieldCfg: {
      type: Object,
      requried: true,
      default() {
        return {}
      }
    },
    after: {
      requried: true,
      default: null
    },
    before: {
      requried: true,
      default: null
    }
  },
  data() {
    return {
      dialogTableVisible: false
    }
  },
  computed: {
    data() {
      return this.type === 'before' ? this.before : this.after
    }
  },
  methods: {
    openTable() {
      this.dialogTableVisible = true
    }
  }
}
</script>

<template>
  <div>
    <el-button type="text" @click="openTable">{{ data.length }}段教育经历</el-button>

    <el-dialog append-to-body title="教育经历" :visible.sync="dialogTableVisible">
      <el-table :data="data">
        <el-table-column property="schoolName" label="学校名称" />
        <el-table-column property="beginDate" label="起始日期" />
        <el-table-column property="endDate" label="结束日期" />
        <el-table-column property="schoolType.label" label="学校类型" />
        <el-table-column property="major" label="专业" />
        <el-table-column property="certificate" label="证书" />
        <el-table-column property="certificate_number" label="证书编号" />
      </el-table>
    </el-dialog>
  </div>
</template>
